<template>
  <div class="statistics-container">
    <div class="statistics-header">
      <button @click="goBack" class="back-button">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
        返回
      </button>
      <h1 class="page-title">📊 任务统计报表</h1>
      <div class="date-info">
        <span>统计时间：{{ currentDate }}</span>
      </div>
    </div>

    <div class="statistics-grid">
      <!-- 任务概览卡片 -->
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-icon">📝</div>
          <div class="stat-content">
            <div class="stat-number">{{ totalTasks }}</div>
            <div class="stat-label">总任务数</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">✅</div>
          <div class="stat-content">
            <div class="stat-number">{{ completedTasks }}</div>
            <div class="stat-label">已完成</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">⏳</div>
          <div class="stat-content">
            <div class="stat-number">{{ pendingTasks }}</div>
            <div class="stat-label">待完成</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">❌</div>
          <div class="stat-content">
            <div class="stat-number">{{ abandonedTasks }}</div>
            <div class="stat-label">已放弃</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">📈</div>
          <div class="stat-content">
            <div class="stat-number">{{ completionRate }}%</div>
            <div class="stat-label">完成率</div>
          </div>
        </div>
      </div>

      <!-- 项目进度模块 -->
      <div class="progress-section">
        <div class="progress-header">
          <h2 class="section-title">📊 项目进度概览</h2>
          <div class="progress-filters">
            <div class="filter-group">
              <label>筛选清单：</label>
              <select v-model="selectedList" class="filter-select">
                <option value="all">全部清单</option>
                <option v-for="list in todoStore.state.lists.filter(l => !l.deleted_at)" 
                        :key="list.id" 
                        :value="list.id">
                  {{ list.name }}
                </option>
                <option value="other">其他</option>
              </select>
            </div>
            <div class="filter-group">
              <label>排序方式：</label>
              <select v-model="progressSortBy" class="filter-select">
                <option value="timeProgress">时间进度</option>
                <option value="completionProgress">完成进度</option>
                <option value="name">项目名称</option>
              </select>
            </div>
            <div class="filter-group">
              <label>排序顺序：</label>
              <select v-model="progressSortOrder" class="filter-select">
                <option value="desc">降序</option>
                <option value="asc">升序</option>
              </select>
            </div>
          </div>
        </div>
        
        <div class="progress-grid">
          <div v-for="project in filteredProgressData" 
               :key="project.id" 
               class="progress-card"
               :class="{ 'overdue': project.isOverdue }">
            <div class="progress-card-header">
              <div class="project-info">
                <div class="project-name" :style="{ color: project.color }">
                  {{ project.name }}
                </div>
                <div class="project-stats">
                  {{ project.completedTasks }}/{{ project.totalTasks }} 任务
                  <span v-if="project.isOverdue" class="overdue-badge">已逾期</span>
                </div>
              </div>
            </div>
            
            <div class="progress-content">
              <!-- 完成进度 -->
              <div class="progress-item">
                <div class="progress-label">
                  <span>完成进度</span>
                  <span class="progress-value">{{ project.completionProgress }}%</span>
                </div>
                <div class="progress-bar">
                  <div class="progress-fill completion" 
                       :style="{ width: project.completionProgress + '%', backgroundColor: project.color }">
                  </div>
                </div>
              </div>
              
              <!-- 时间进度 -->
              <div class="progress-item">
                <div class="progress-label">
                  <span>时间进度</span>
                  <span class="progress-value">{{ project.timeProgress }}%</span>
                </div>
                <div class="progress-bar">
                  <div class="progress-fill time" 
                       :style="{ width: project.timeProgress + '%' }"
                       :class="{ 'overdue-fill': project.isOverdue }">
                  </div>
                </div>
              </div>
              
              <!-- 预计剩余时间 -->
              <div class="progress-footer">
                <div class="remaining-info">
                  <span class="remaining-time">⏱️ 预计剩余：{{ project.estimatedRemainingHours }}小时</span>
                  <span class="remaining-pomodoros">🍅 {{ project.remainingPomodoros }}个番茄钟</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div v-if="filteredProgressData.length === 0" class="empty-state">
            <div class="empty-icon">📋</div>
            <div class="empty-text">暂无项目数据</div>
            <div class="empty-desc">创建清单并添加任务后，这里将显示项目进度</div>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="charts-grid">
        <!-- 任务状态分布饼图 -->
        <div class="chart-container">
          <h3 class="chart-title">任务状态分布</h3>
          <v-chart 
            class="chart" 
            :option="statusChartOption" 
            autoresize
          />
        </div>

        <!-- 优先级分布饼图 -->
        <div class="chart-container">
          <h3 class="chart-title">优先级分布</h3>
          <v-chart 
            class="chart" 
            :option="priorityChartOption" 
            autoresize
          />
        </div>

        <!-- 清单任务分布柱状图 -->
        <div class="chart-container full-width">
          <h3 class="chart-title">各清单任务分布</h3>
          <v-chart 
            class="chart" 
            :option="listChartOption" 
            autoresize
          />
        </div>

        <!-- 每日完成趋势线图 -->
        <div class="chart-container full-width">
          <h3 class="chart-title">最近7天完成趋势</h3>
          <v-chart 
            class="chart" 
            :option="trendChartOption" 
            autoresize
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { useTodoStore } from '../stores/todoStore.js'

// 注册ECharts组件
use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

const todoStore = useTodoStore()
const router = useRouter()

// 进度筛选相关
const selectedList = ref('all')
const progressSortBy = ref('timeProgress') // 'timeProgress', 'completionProgress', 'name'
const progressSortOrder = ref('desc') // 'asc', 'desc'

// 返回上一页
function goBack() {
  router.push('/todo')
}

// 当前日期
const currentDate = computed(() => {
  return new Date().toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
})

// 基础统计数据
const totalTasks = computed(() => todoStore.state.tasks.length)
const completedTasks = computed(() => 
  todoStore.state.tasks.filter(task => task.completed).length
)
const pendingTasks = computed(() => 
  todoStore.state.tasks.filter(task => !task.completed && task.status !== 'abandoned').length
)
const abandonedTasks = computed(() => 
  todoStore.state.tasks.filter(task => task.status === 'abandoned').length
)
const completionRate = computed(() => {
  if (totalTasks.value === 0) return 0
  return Math.round((completedTasks.value / totalTasks.value) * 100)
})

// 项目进度数据
const projectProgressData = computed(() => {
  const progressList = []
  
  // 处理有清单的任务
  todoStore.state.lists.forEach(list => {
    if (list.deleted_at) return // 跳过已删除的清单
    
    const listTasks = todoStore.state.tasks.filter(task => 
      task.listId === list.id && !task.deleted_at
    )
    
    if (listTasks.length === 0) return // 跳过没有任务的清单
    
    const completedTasks = listTasks.filter(task => task.completed)
    const totalTasks = listTasks.length
    
    // 计算完成进度
    const completionProgress = totalTasks > 0 ? Math.round((completedTasks.length / totalTasks) * 100) : 0
    
    // 计算时间进度
    const now = new Date()
    let timeProgress = 0
    let isOverdue = false
    
    if (listTasks.length > 0) {
      // 找到最早的开始时间和最晚的截止时间
      const tasksWithDueDate = listTasks.filter(task => task.dueDate)
      if (tasksWithDueDate.length > 0) {
        const startTimes = listTasks.map(task => new Date(task.startTime || task.createdAt))
        const dueDates = tasksWithDueDate.map(task => new Date(task.dueDate))
        
        const projectStart = new Date(Math.min(...startTimes))
        const projectEnd = new Date(Math.max(...dueDates))
        
        if (projectEnd > projectStart) {
          const totalDuration = projectEnd - projectStart
          const elapsed = now - projectStart
          timeProgress = Math.max(0, Math.min(100, Math.round((elapsed / totalDuration) * 100)))
          isOverdue = now > projectEnd && completionProgress < 100
        }
      }
    }
    
    // 计算预计剩余时间（基于番茄钟）
    const remainingPomodoros = listTasks.reduce((total, task) => {
      if (!task.completed) {
        const required = task.pomodoroRequired || 1 // 默认1个番茄钟
        const completed = task.pomodoroCount || 0
        return total + Math.max(0, required - completed)
      }
      return total
    }, 0)
    
    const estimatedRemainingHours = remainingPomodoros > 0 ? Math.round((remainingPomodoros * 25) / 60 * 10) / 10 : 0
    
    progressList.push({
      id: list.id,
      name: list.name,
      color: list.color,
      totalTasks,
      completedTasks: completedTasks.length,
      pendingTasks: totalTasks - completedTasks.length,
      completionProgress,
      timeProgress,
      isOverdue,
      estimatedRemainingHours: estimatedRemainingHours || 0,
      remainingPomodoros: remainingPomodoros || 0
    })
  })
  
  // 处理不属于任何清单的任务（"其他"选项）
  const existingListIds = todoStore.state.lists.filter(list => !list.deleted_at).map(list => list.id)
  const orphanTasks = todoStore.state.tasks.filter(task => 
    !task.deleted_at && (!task.listId || !existingListIds.includes(task.listId))
  )
  
  if (orphanTasks.length > 0) {
    const completedTasks = orphanTasks.filter(task => task.completed)
    const totalTasks = orphanTasks.length
    
    // 计算完成进度
    const completionProgress = totalTasks > 0 ? Math.round((completedTasks.length / totalTasks) * 100) : 0
    
    // 计算时间进度
    const now = new Date()
    let timeProgress = 0
    let isOverdue = false
    
    if (orphanTasks.length > 0) {
      const tasksWithDueDate = orphanTasks.filter(task => task.dueDate)
      if (tasksWithDueDate.length > 0) {
        const startTimes = orphanTasks.map(task => new Date(task.startTime || task.createdAt))
        const dueDates = tasksWithDueDate.map(task => new Date(task.dueDate))
        
        const projectStart = new Date(Math.min(...startTimes))
        const projectEnd = new Date(Math.max(...dueDates))
        
        if (projectEnd > projectStart) {
          const totalDuration = projectEnd - projectStart
          const elapsed = now - projectStart
          timeProgress = Math.max(0, Math.min(100, Math.round((elapsed / totalDuration) * 100)))
          isOverdue = now > projectEnd && completionProgress < 100
        }
      }
    }
    
    // 计算预计剩余时间（基于番茄钟）
    const remainingPomodoros = orphanTasks.reduce((total, task) => {
      if (!task.completed) {
        const required = task.pomodoroRequired || 1 // 默认1个番茄钟
        const completed = task.pomodoroCount || 0
        return total + Math.max(0, required - completed)
      }
      return total
    }, 0)
    
    const estimatedRemainingHours = remainingPomodoros > 0 ? Math.round((remainingPomodoros * 25) / 60 * 10) / 10 : 0
    
    progressList.push({
      id: 'other',
      name: '其他',
      color: '#6b7280',
      totalTasks,
      completedTasks: completedTasks.length,
      pendingTasks: totalTasks - completedTasks.length,
      completionProgress,
      timeProgress,
      isOverdue,
      estimatedRemainingHours: estimatedRemainingHours || 0,
      remainingPomodoros: remainingPomodoros || 0
    })
  }
  
  return progressList
})

// 筛选和排序后的项目进度数据
const filteredProgressData = computed(() => {
  let filtered = projectProgressData.value
  
  // 按清单筛选
  if (selectedList.value !== 'all') {
    filtered = filtered.filter(item => item.id === selectedList.value)
  }
  
  // 排序
  filtered.sort((a, b) => {
    let aValue, bValue
    
    switch (progressSortBy.value) {
      case 'timeProgress':
        aValue = a.timeProgress
        bValue = b.timeProgress
        break
      case 'completionProgress':
        aValue = a.completionProgress
        bValue = b.completionProgress
        break
      case 'name':
        aValue = a.name.toLowerCase()
        bValue = b.name.toLowerCase()
        break
      default:
        return 0
    }
    
    if (progressSortOrder.value === 'asc') {
      return aValue > bValue ? 1 : -1
    } else {
      return aValue < bValue ? 1 : -1
    }
  })
  
  return filtered
})

// 任务状态分布数据
const statusChartOption = computed(() => {
  const data = [
    { value: completedTasks.value, name: '已完成', itemStyle: { color: '#10b981' } },
    { value: pendingTasks.value, name: '待完成', itemStyle: { color: '#f59e0b' } },
    { value: abandonedTasks.value, name: '已放弃', itemStyle: { color: '#ef4444' } }
  ]
  
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '任务状态',
        type: 'pie',
        radius: '50%',
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

// 优先级分布数据
const priorityChartOption = computed(() => {
  const highTasks = todoStore.state.tasks.filter(task => task.priority === 'high').length
  const mediumTasks = todoStore.state.tasks.filter(task => task.priority === 'medium').length
  const lowTasks = todoStore.state.tasks.filter(task => task.priority === 'low').length
  
  const data = [
    { value: highTasks, name: '高优先级', itemStyle: { color: '#ef4444' } },
    { value: mediumTasks, name: '中优先级', itemStyle: { color: '#f59e0b' } },
    { value: lowTasks, name: '低优先级', itemStyle: { color: '#10b981' } }
  ]
  
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '优先级分布',
        type: 'pie',
        radius: '50%',
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

// 清单任务分布数据
const listChartOption = computed(() => {
  const listStats = {}
  
  // 统计每个清单的任务数量
  todoStore.state.lists.forEach(list => {
    if (list.deleted_at) return // 跳过已删除的清单
    
    const totalCount = todoStore.state.tasks.filter(task => 
      task.listId === list.id && !task.deleted_at
    ).length
    const completedCount = todoStore.state.tasks.filter(task => 
      task.listId === list.id && task.completed && !task.deleted_at
    ).length
    
    if (totalCount > 0) {
      listStats[list.name] = {
        total: totalCount,
        completed: completedCount,
        pending: totalCount - completedCount
      }
    }
  })
  
  // 统计不属于任何清单的任务（"其他"选项）
  const existingListIds = todoStore.state.lists.filter(list => !list.deleted_at).map(list => list.id)
  const orphanTasks = todoStore.state.tasks.filter(task => 
    !task.deleted_at && (!task.listId || !existingListIds.includes(task.listId))
  )
  
  if (orphanTasks.length > 0) {
    const totalCount = orphanTasks.length
    const completedCount = orphanTasks.filter(task => task.completed).length
    
    listStats['其他'] = {
      total: totalCount,
      completed: completedCount,
      pending: totalCount - completedCount
    }
  }
  
  const categories = Object.keys(listStats)
  const totalData = categories.map(name => listStats[name].total)
  const completedData = categories.map(name => listStats[name].completed)
  const pendingData = categories.map(name => listStats[name].pending)
  
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['总任务', '已完成', '待完成']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: categories
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '总任务',
        type: 'bar',
        data: totalData,
        itemStyle: { color: '#6366f1' }
      },
      {
        name: '已完成',
        type: 'bar',
        data: completedData,
        itemStyle: { color: '#10b981' }
      },
      {
        name: '待完成',
        type: 'bar',
        data: pendingData,
        itemStyle: { color: '#f59e0b' }
      }
    ]
  }
})

// 最近7天完成趋势数据
const trendChartOption = computed(() => {
  const last7Days = []
  const completedCounts = []
  
  for (let i = 6; i >= 0; i--) {
    const date = new Date()
    date.setDate(date.getDate() - i)
    const dateStr = date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
    last7Days.push(dateStr)
    
    // 统计该日完成的任务数量
    const completedOnDate = todoStore.state.tasks.filter(task => {
      if (!task.completed || !task.completed_at) return false
      const taskDate = new Date(task.completed_at)
      return taskDate.toDateString() === date.toDateString()
    }).length
    
    completedCounts.push(completedOnDate)
  }
  
  return {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: last7Days
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '完成任务数',
        type: 'line',
        data: completedCounts,
        smooth: true,
        itemStyle: { color: '#10b981' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(16, 185, 129, 0.3)' },
              { offset: 1, color: 'rgba(16, 185, 129, 0.1)' }
            ]
          }
        }
      }
    ]
  }
})

onMounted(() => {
  // 确保数据已加载
  if (!todoStore.state.isInitialized) {
    todoStore.loadData()
  }
})
</script>

<style lang="less" scoped>
.statistics-container {
  padding: 20px;
  background-color: var(--background-color);
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
}

.statistics-header {
  position: relative;
  margin-bottom: 32px;
  text-align: center;
  
  .page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
  }
  
  .date-info {
    color: var(--text-secondary);
    font-size: 14px;
  }
}

.back-button {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.back-button:hover {
  background: var(--primary-color);
  color: var(--background-color);
  transform: translateX(-2px);
}

.back-button svg {
  transition: transform 0.2s;
}

.back-button:hover svg {
  transform: translateX(-2px);
}

.statistics-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.stat-card {
  background: var(--surface-color);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-color);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color);
  }
  
  .stat-icon {
    font-size: 32px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-color);
    border-radius: 8px;
  }
  
  .stat-content {
    flex: 1;
    
    .stat-number {
      font-size: 24px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    
    .stat-label {
      font-size: 14px;
      color: var(--text-secondary);
    }
  }
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  gap: 24px;
}

.chart-container {
  background: var(--surface-color);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-color);
  
  &.full-width {
    grid-column: 1 / -1;
  }
  
  .chart-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
  }
  
  .chart {
    height: 300px;
    width: 100%;
  }
}

// 项目进度模块样式
.progress-section {
  margin-bottom: 32px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
  
  .section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }
}

.progress-filters {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  
  .filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    
    label {
      font-size: 14px;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    
    .filter-select {
      padding: 6px 12px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background: var(--surface-color);
      color: var(--text-primary);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      
      &:hover {
        border-color: var(--primary-color);
      }
      
      &:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
      }
    }
  }
}

.progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.progress-card {
  background: var(--surface-color);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-color);
  transition: all 0.2s ease;
  border: 2px solid transparent;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-color);
  }
  
  &.overdue {
    border-color: #ef4444;
    background: linear-gradient(135deg, var(--surface-color) 0%, rgba(239, 68, 68, 0.05) 100%);
  }
}

.progress-card-header {
  margin-bottom: 16px;
  
  .project-info {
    .project-name {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    .project-stats {
      font-size: 14px;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 8px;
      
      .overdue-badge {
        background: #ef4444;
        color: white;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
      }
    }
  }
}

.progress-content {
  .progress-item {
    margin-bottom: 16px;
    
    .progress-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 14px;
      
      .progress-value {
        font-weight: 600;
        color: var(--text-primary);
      }
    }
    
    .progress-bar {
      height: 8px;
      background: var(--background-color);
      border-radius: 4px;
      overflow: hidden;
      
      .progress-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.3s ease;
        
        &.completion {
          background: linear-gradient(90deg, #10b981, #059669);
        }
        
        &.time {
          background: linear-gradient(90deg, #3b82f6, #1d4ed8);
        }
        
        &.overdue-fill {
          background: linear-gradient(90deg, #ef4444, #dc2626) !important;
        }
      }
    }
  }
}

.progress-footer {
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  
  .remaining-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-secondary);
    
    .remaining-time,
    .remaining-pomodoros {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  
  .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
  }
  
  .empty-text {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-primary);
  }
  
  .empty-desc {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .statistics-container {
    padding: 16px;
  }
  
  .stats-cards {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-container {
    .chart {
      height: 250px;
    }
  }
  
  .progress-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .progress-filters {
    width: 100%;
    justify-content: flex-start;
    
    .filter-group {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      
      .filter-select {
        width: 100%;
        min-width: 120px;
      }
    }
  }
  
  .progress-grid {
    grid-template-columns: 1fr;
  }
  
  .progress-footer {
    .remaining-info {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
  }
}
</style>